<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.ok{
			    color:green;
			}
			.error{
			    color:red;
			}
		</style>
	</head>
	<body>
		名字<input type="text" id="name" onfocus="" onblur="checkName()"/>
		<span  id="nameMsg">5-10位的字母、数字、下划线</span>
		<span  id="nameExistMsg"></span>
		<br/>
		
		邮箱<input type="text" id="email" onblur="checkEmail()"/>
		<span id="emailMsg">必须符合邮箱的格式</span>
		
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function checkName() {
				var name = document.getElementById('name').value;
				var nameMsgSpan = document.getElementById('nameMsg');
				var reg = /^\w{5,10}$/;
				if (reg.test(name)) {
					// class="ok"
					nameMsgSpan.className = 'ok';
					
					// ajax去后台验证这个用户名是不是存在
					$.post(
						'${pageContext.request.contextPath}/ajax2',
						{'name' : name},
						function(jsonObj) {
							//  {"isExist" : true}
							if(jsonObj.isExist) {
								$('#nameExistMsg').html('改用户已经存在');
								$('#nameExistMsg').attr('class', 'error');
							} else {
								$('#nameExistMsg').html('改用户可以使用');
								$('#nameExistMsg').attr('class', 'ok');
							}
						},
						'json'
					);
				} else {
					nameMsgSpan.className = 'error';
				}
			}
			
			function checkEmail() {
				var email = document.getElementById('email').value;
				var emailMsgSpan = document.getElementById('emailMsg');
				// situ@gmail.com.cn
				var reg = /^\w+@(\w+\.)+\w+$/;
				if (reg.test(email)) {
					// class="ok"
					emailMsgSpan.className = 'ok';
				} else {
					emailMsgSpan.className = 'error';
				}
			}
		</script>
	</body>
</html>
